<template>
  <div class="wrapper">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="点位">
        <el-input v-model="formInline.position" placeholder="请输入点位"></el-input>
      </el-form-item>
      <el-form-item label="首推">
        <el-input v-model="formInline.respText" placeholder="请输入关注首推文字"></el-input>
      </el-form-item>    
      <el-form-item label="机器人编号">
        <el-select v-model="formInline.code" placeholder="机器人编号">
          <el-option
            v-for="item in options"
            :key="item.code"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">生成二维码</el-button>
      </el-form-item>
    </el-form>  
  <div class="demo-image__placeholder">
    <div class="block">
      <span class="demonstration">点击按钮生成二维码</span>
      <el-image :src="url">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>        
      </el-image>   
    </div>
  </div>     
  </div>
</template>
<script>
import Vue from 'vue';
import {Form,FormItem,Input,Select,Option,Button,Image} from 'element-ui';
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Select);
Vue.use(Option);
Vue.use(Input);
Vue.use(Button);
Vue.use(Image);
import request from "@/utils/request";
import { MessageBox } from "mint-ui";

export default {
  data(){
    return {
      formInline: {
        position: '',
        respText: '',
        code: '',
      },    
      options: [],
      url: ''
    }
  },
  methods:{
    onSubmit() {
      const _this = this;
      if(!_this.formInline.position || !_this.formInline.respText || !_this.formInline.code) {
        return MessageBox.alert("所有项都为必填项", "提示");
      }
      request
          .get('http://robot.ttrsznkj.com/yq-api/robot/logic/genRobotPositionQrcode', {
            position: _this.formInline.position,
            respText: _this.formInline.respText,
            productId: _this.formInline.code
          })
          .then(response => {
            if(response.code === 0) {
              _this.url = response.msg;
            }
          }); 
    }      
  },
  mounted(){
    const _this = this;
    request
        .get('http://robot.ttrsznkj.com/yq-api/robot/logic/listRobot', {})
        .then(response => {
          if(response.code === 0) {
            _this.options = response.data
          }
        }); 
  }
}
</script>
<style lang = "stylus" scoped >
.wrapper
  padding 20px
</style>


